<template>
  <el-form :show-message="false" :rules="rules" :model="statusManagementData" label-position="left" :size="form_size" :label-width="label_width" style="margin-left: 12px">
    <el-row>
      <div class="require_indicate"><span style="color: red">*</span> indicates a required field.
      </div>
    </el-row>
    <el-row>
      <el-col :span="7">
        <el-form-item label="PCRS Status :">
          <permission-slot :readOnly="!functionList.update_request_status"
                           :labelName="statusManagementData.pcrsStatusValue">
            <el-select v-model="statusManagementData.pcrsStatusValue" placeholder="select">
              <el-option
                v-for="item in pcrsStatus"
                :key="item.statusName"
                :label="item.statusName"
                :value="item.statusName">
              </el-option>
            </el-select>
          </permission-slot>
        </el-form-item>
      </el-col>
    </el-row>
    <template v-if="functionList.update_incharge">
      <el-row>
        <el-form-item label="In Charge :" prop="inCharge">
          <el-input v-model="statusManagementData.inCharge" class="text_area_input"></el-input>
        </el-form-item>
      </el-row>
    </template>
    <template v-else>
    </template>
  </el-form>
</template>

<script>
import statusService from '@/service/status'
import permissionSlot from '@/base-components/permission/PermissionSlot.vue'

export default {
  props: {
    statusManagementData: {
      type: Object
    },
    functionList: {
      type: Object
    }
  },
  components: {
    permissionSlot
  },
  created() {
    this.initPCRSStatus()
  },
  data() {
    return {
      form_size: 'mini',
      label_width: '200px',
      pcrsStatus: [],
      rules: {
        inCharge: [
          {required: true, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    async initPCRSStatus() {
      this.pcrsStatus = await statusService.getStatusByType('OverAll')
    }
  }
}
</script>

<style scoped lang="scss">
  @import './../../../common/css/base.scss';

  .text_area_input {
    margin-bottom: 5px;
    width: 175px;
  }

  .require_indicate {
    color: dimgray;
    font-size: 12px;
    margin-top: 5px
  }
</style>
